/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import '../../componentStyle/blogSider.css'
import { Icon, Modal, Button, message } from 'antd';
import avatorURL from '../../../../../images/profile photo.jpg'
import store from '../../../../../redux/store';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_lkly05pyxv9.js',
// });

const error = (msg) => {
    message.error(msg);
};

class ArticleContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lineWidth: 0,
            loading: false,
            visible: false
        }
    }

    // 链接跳转到增加文章的页面
    handleAdd = (user) => {
        if (!user) {
            error('当前未处于登陆状态，请登录重试')
            return;
        }
        this.props.history.push(`/edit/undefiend`);
    }

    handleMouseOver = () => {
        const lineWidth = this.title.offsetWidth;
        this.setState({
            lineWidth
        });
    }

    handleMouseOut = () => {
        this.setState({
            lineWidth: 0
        });
    }

    // 以下三个函数均是模态框相关函数（删除）
    showModal = () => {
        if(!store.getState().user){
            error('当前处于未登录状态，请登录重试')
            return;
        }

        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        const { articleID, title } = this.props;
        this.setState({ loading: true });
        setTimeout(() => {
            this.setState({ loading: false, visible: false });
            // 传递index（索引）给LayoutContent，以便删除
            this.props.deleteAssignArticle(articleID, title);
        }, 2000);
    };

    handleCancel = () => {
        this.setState({ visible: false });
    };

    // 跳转到具体文章展示页面
    handleArticleClick = () => {
        const { articleID } = this.props;
        this.props.history.push(`/blog/${articleID}`);
    }

    render() {
        let {user} = store.getState()

        const { visible, loading } = this.state;
        const { item } = this.props;
        const date = new Date(parseInt(item.createTime));
        const time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        return (
            <div style={{
                backgroundColor: '#fff',
                borderBottom: '1px solid #DDDDDD',
                height: 200,
                position: 'relative'
            }}>
                <a
                    style={{
                        fontSize: 30,
                        marginLeft: 30,
                        color: '#000'
                    }}
                    ref={(title) => this.title = title}
                    onMouseOver={this.handleMouseOver}
                    onMouseOut={this.handleMouseOut}
                    onClick={this.handleArticleClick}
                >
                    {item.title}
                </a>
                <div style={{
                    height: 2,
                    width: (this.state.lineWidth),
                    backgroundColor: '#CCCCCC',
                    marginLeft: 30,
                    transitionDuration: '.3s'
                }}></div>
                <div style={{
                    position: 'absolute',
                    top: 20,
                    right: 20
                }}>
                    <span className="anticon-portal anticonzengjia" style={{
                        fontSize: 20,
                        marginRight: 19
                    }} onClick={()=>this.handleAdd(user)} ></span>
                    <span className="anticon-portal anticonxiugai" style={{
                        fontSize: 20,
                        marginRight: 19
                    }} ></span>
                    <span className="anticon-portal anticonshanchu" style={{
                        fontSize: 20,
                        marginRight: 19
                    }} onClick={this.showModal} ></span>
                </div>
                <div style={{
                    marginLeft: 30,
                    marginTop: 10
                }} className="removeFloat">
                    <img src={avatorURL} alt="头像" width={48} height={48} style={{
                        borderRadius: '50%',
                        float: 'left'
                    }} />
                    <div style={{
                        marginLeft: 30,
                        float: 'left',
                        color: 'grey'
                    }}>
                        {item.author['nickname']}
                    </div>
                    <br />
                    <div style={{
                        marginLeft: 30,
                        float: 'left',
                        color: 'grey'
                    }}>
                        {time}
                    </div>
                </div>
                <div style={{
                    marginTop: 5,
                    marginLeft: 25
                }}>
                    {item.content}
                </div>
                <Modal
                    visible={visible}
                    title="删除文章"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" onClick={this.handleCancel}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={loading} onClick={this.handleOk} style={{
                            backgroundColor: '#f00',
                            border: '1px solid #f00'
                        }}>
                            删除
                        </Button>,
                    ]}
                >
                    <p>{`确认删除《${item.title}》？`}</p>
                </Modal>
            </div >
        )
    }
}


export default withRouter(ArticleContent);